<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/online">
<head>
    <title>Topics | JF</title>
</head>
<body>
    <main layout:fragment="content">
        <article class="container" style="padding: 3% 0 2%;">
            <header class="row">
                <blockquote class="flow-text left" th:text="${header}">Header</blockquote>
                <blockquote class="flow-text right" th:text="|话题数量： | + ${topicsTotalNum}">Number of topics</blockquote>
            </header>
            <section class="row">
                <div class="col s12">
                    <table class="striped bordered centered" th:if="${topics.size() != 0}">
                        <thead>
                        <tr>
                            <th>评论数</th>
                            <th>标题</th>
                            <th>作者</th>
                            <th>创建时间</th>
                            <th>Enter</th>
                        </tr>
                        </thead>
                        <tbody>
                            <th:block th:each="topic : ${topics}">
                                <tr>
                                    <td th:text="${answerDao.countAnswersByTopic_Id(topic.getId())}">Number of answers</td>
                                    <td th:text="${topic.getTitle()}">Topic's title</td>
                                    <td>
                                    <a th:href="@{'/profile/' + ${topic.getIdUser()}}">
                                            <div class="chip" th:text="${userDao.getUsernameById(topic.getIdUser())}">Topic's author</div>
                                        </a>
                                    </td>
                                    
                                    <td th:text="${topic.displayParsedCreatedDate()}">Topic's created date</td>
                                    <td>
                                        <a th:href="@{'/topic/' + ${topic.getId()}}" class="btn btn-floating pulse">
                                            <i class="material-icons">arrow_forward</i>
                                        </a>
                                    </td>
                                </tr>
                            </th:block>
                        </tbody>
                    </table>
						<ul class="pagination center">
							<li class="disabled"><a th:href="@{'/topics/'+${category}+'/'+ ${currentPage-1}}"  th:if="${isUserTopicPage==false}"><i class="material-icons" th:if="${currentPage>1}">chevron_left</i></a></li>
							<li class="disabled"><a th:href="@{'/topics/user/' + ${user.getId()} + '_'+ ${currentPage-1}}" th:if="${isUserTopicPage==true}"><i class="material-icons" th:if="${currentPage>1}">chevron_left</i></a></li>
							
							<li class="active"><a th:href="@{'/topics/'+${category}+'/'+ ${currentPage}}" th:text="${currentPage}">page</a></li>
							
							<!-- <li class="active"><a th:href="@{'/topics/'+${category}+'/'+ ${page}}" th:if="${currentPage==page}" th:text="${page}">page</a></li>
							<li class="waves-effect"><a th:href="@{'/topics/'+${category}+'/'+ ${page}}" th:if="${currentPage!=page}" th:text="${page}">page</a></li> -->
							
							<!-- <li class="active"><a th:href="@{'/topics/'+${category}+'/2'}" th:if="${currentPage==2}">2</a></li>
							<li class="waves-effect"><a th:href="@{'/topics/'+${category}+'/2'}" th:if="${currentPage!=2}">2</a></li>
							
							<li class="active"><a th:href="@{'/topics/'+${category}+'/3'}" th:if="${currentPage==3}">3</a></li>
							<li class="waves-effect"><a th:href="@{'/topics/'+${category}+'/3'}" th:if="${currentPage!=3}">3</a></li>
							
							<li class="active"><a th:href="@{'/topics/'+${category}+'/4'}" th:if="${currentPage==4}">4</a></li>
							<li class="waves-effect"><a th:href="@{'/topics/'+${category}+'/4'}" th:if="${currentPage!=4}">4</a></li> -->
							
							<li class="waves-effect"><a th:href="@{'/topics/'+${category}+'/'+ ${currentPage+1}}" th:if="${isUserTopicPage==false}"><i class="material-icons" th:if="${hasNext}">chevron_right</i></a></li>
							<li class="waves-effect"><a th:href="@{'/topics/user/'+${user.getId()}+'_'+ ${currentPage+1}}" th:if="${isUserTopicPage==true}"><i class="material-icons" th:if="${hasNext}">chevron_right</i></a></li>
						</ul>
			</div>
            </section>
        </article>
    </main>
</body>
</html>